<template>
	<view class="container" :style="[{paddingTop:CustomBar+'px'}]">
		<view class="weixin-login" :style="[{height:winHeight+'px'}]">
			<cu-custom bgColor="bg-white" :isBack="true" fatherCss="box-shadow:none">
				<block slot="backText"></block>
				<block slot="content">授权信息</block>
			</cu-custom>
			<view class="logo-name">
				<!-- bree logo -->
				<!-- https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/logo-login-befree-zs.png -->
				<!-- 掌商 logo -->
				<!-- https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/logo-login.png -->
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/logo-login-befree-zs.png"
				 mode=""></image>
				<view class="">
					掌商
				</view>
				
			</view>
			<button class="get_userinfo" open-type="getPhoneNumber" @getphonenumber="getPhoneNum">微信登录</button>
			<view class="login-tips">
				授权即代表您已同意掌商<text @click="goAgree">用户协议、隐私政策、</text>并授权使用您的掌商账号信息(如昵称、头像、收货地址等)以便您进行统一管理
			</view>
		</view>
	</view>
</template>

<script>
	import tuiFooter from "./component/footer"
	import tuiKeyboard from "@/components/thorUI/keyboard"
	import tuiKeyboardInput from "@/components/thorUI/keyboard-input"
	import tuiIcon from "@/components/thorUI/icon"
	export default {
		components: {
			tuiFooter,
			tuiKeyboard,
			tuiKeyboardInput,
			tuiIcon
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				winHeight: 0,
			}
		},
		onLoad(options) {
			var that = this
			let next = options.next
			let loginCode = options.loginCode
			this.loginCode = loginCode
			this.back_url = next
			setTimeout(() => {
				uni.getSystemInfo({
					success: function(res) {
						that.winHeight = res.windowHeight - that.CustomBar
					}
				})
			}, 50)
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		methods: {
			goAgree(){
				uni.navigateTo({
					url: '/pages/userAgree?type=yonghu'
				})
			},
			// 微信登录
			getPhoneNum(res) {
				var that = this
				that.$request({
					url: '/user/get_wx_user_phone',
					methods: 'post',
					data: {
						wx_session_key: that.loginCode,
						encryptedData: encodeURIComponent(res.detail.encryptedData),
						iv: encodeURIComponent(res.detail.iv),
					},
					success: res => {
						if (res.data.status == 1) {
							var userInfo = uni.getStorageSync('userInfo')
							userInfo.phone = res.data.data.phoneNumber
							uni.setStorageSync('userInfo', userInfo)
							if (uni.getStorageSync('wxSessionKey')) {
								uni.removeStorageSync('wxSessionKey')
							}
							that.nextUrl()
						}
					},
					fail: () => {},

					complete: () => {}
				});
			},
			nextUrl() {
				// 跳转页面
				var next_url = decodeURIComponent(this.back_url)
				uni.getStorageSync('needOnload', true)
				uni.redirectTo({
					url: next_url,
					fail: function() {
						uni.switchTab({
							url: next_url
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
	.login-tips {
		font-size: 22rpx;
		color: #999;
		position: absolute;
		bottom: 20rpx;
		left: 0;
		width: 100%;
		line-height: 50rpx;
		text-align: center;
		padding: 0 20rpx;
	}
	
	.login-tips text{
		color: #F34930;
	}

	.container {
		box-sizing: border-box;
		width: 100%;
		position: relative;
	}

	.weixin-login {
		width: 100%;
		background: #fff
	}

	.weixin-login .logo-name {
		width: 200rpx;
		height: 250rpx;
		display: flex;
		flex-direction: column;
		margin: 100rpx auto 100rpx
	}

	.weixin-login .logo-name image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
	}

	.weixin-login .logo-name view {
		color: #333;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 50rpx;
	}

	.weixin-login .tips {
		line-height: 70rpx;
		font-size: 26rpx;
		color: #616C78;
		text-align: center;
	}

	.get_userinfo {
		background-color: #1AAC1B;
		/* background: linear-gradient(to right, #fe7b68, #f34930); */
		border-radius: 10rpx;
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		margin-top: 10rpx;
		border: 1px solid transparent;
		outline: none;
		font-size: 30rpx
	}
</style>

<style>
	.tui-footer {
		padding: 10rpx 0 !important;
	}

	.tui-footer-copyright {
		color: #fff !important;
	}
</style>
